import React, { useCallback, useEffect } from "react";
import { Select } from "@arco-design/web-react"
import { OptionInfo } from "@arco-design/web-react/es/Select/interface"

const Option = Select.Option;

export interface CommonOptionsType {
  value: number | string;
  label: string;
}

interface FormSelectProps {
  options: Array<CommonOptionsType>;
  allowClear?: boolean;
  mode?: 'multiple';
  placeholder?: string;
  defaultValue?: number;
  disabled?: boolean;
  value?: string | number | string[] | number[];
  onChange?: (value: any, option: OptionInfo | OptionInfo[]) => void;
}

export const FormSelect = (props: FormSelectProps) => {

  const {
    mode,
    placeholder,
    allowClear = false, // 默认不允许清除
    onChange,
    options,
    defaultValue,
    disabled,
  } = props;

  return (
    <Select
      className="filter-from-select"
      mode={mode}
      defaultValue={defaultValue}
      allowClear={allowClear}
      onChange={onChange}
      disabled={disabled}
      placeholder={placeholder}>
      {options.map(option => (
        <Option key={option.value} value={option.value}>
          {option.label}
        </Option>
      ))}
    </Select>
  );
}
